<template>
    <div 
        class="books-covers-container"
        @touchstart="handleTouchStart"
        @touchmove="handleTouchMove"
        @touchend="handleTouchEnd"
    >
        <div 
            class="books-covers-wrapper"
            :class="{ 'no-transition': isDragging }"
            :style="{ transform: `translateX(${scrollX}px)` }"
        >
            <div 
                v-for="(titles, bookKey) in booksData" 
                :key="bookKey"
                class="book-cover-item"
                :class="{ active: selectedBookId === bookKey }"
                @click="handleClick(bookKey)"
            >
                <div class="book-cover">
                    <div class="book-cover-content">
                        <div class="book-cover-title">{{ getBookName(bookKey) }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Props {
    booksData: Record<string, string[]>
    selectedBookId: string
}

const props = defineProps<Props>()

const emit = defineEmits<{
    selectBook: [bookId: string]
}>()

// 滑动相关状态
const scrollX = ref(0)
const touchStartX = ref(0)
const touchStartY = ref(0)
const touchStartScrollX = ref(0)
const isDragging = ref(false)
const isHorizontalDrag = ref(false)

// 获取书籍名称
const getBookName = (bookKey: string): string => {
    const bookNames: Record<string, string> = {
        'b01': '穷通宝鉴',
        'b02': '滴天髓',
        'b03': '三命通会',
        'b04': '八字提要',
        'b05': '子平真诠',
        'b06': '渊海子平',
        'b07': '天元巫咸',
        'b08': '神峰通考',
        'b09': '千里命稿',
        'b10': '五行精纪',
        'b11': '李虚中命书'
    }
    return bookNames[bookKey] || bookKey
}

// 滑动处理
const handleTouchStart = (e: TouchEvent) => {
    e.stopPropagation()
    const touch = e.touches?.[0]
    if (!touch) return
    isDragging.value = true
    isHorizontalDrag.value = false
    touchStartX.value = touch.clientX
    touchStartY.value = touch.clientY
    touchStartScrollX.value = scrollX.value
}

const handleTouchMove = (e: TouchEvent) => {
    if (!isDragging.value) return
    const touch = e.touches?.[0]
    if (!touch) return
    
    const deltaX = Math.abs(touch.clientX - touchStartX.value)
    const deltaY = Math.abs(touch.clientY - touchStartY.value)
    
    // 判断滑动方向：如果水平滑动距离大于垂直滑动距离，则认为是水平滑动
    if (!isHorizontalDrag.value && deltaX > 10) {
        if (deltaX > deltaY) {
            isHorizontalDrag.value = true
        }
    }
    
    // 如果是水平滑动，处理水平滑动
    if (isHorizontalDrag.value) {
        e.stopPropagation()
        e.preventDefault()
        
        const newDeltaX = touch.clientX - touchStartX.value
        const newScrollX = touchStartScrollX.value + newDeltaX
        
        // 计算边界
        const container = e.currentTarget as HTMLElement
        const wrapper = container.querySelector('.books-covers-wrapper') as HTMLElement
        if (container && wrapper) {
            const maxScroll = 0
            const wrapperWidth = wrapper.scrollWidth
            const containerWidth = container.offsetWidth
            const minScroll = containerWidth - wrapperWidth
            scrollX.value = Math.max(minScroll, Math.min(maxScroll, newScrollX))
        }
    }
    // 如果是垂直滑动，不阻止默认行为，让页面正常滚动
}

const handleTouchEnd = (e: TouchEvent) => {
    e.stopPropagation()
    isDragging.value = false
    isHorizontalDrag.value = false
}

// 点击处理
const handleClick = (bookId: string) => {
    if (isDragging.value) return
    emit('selectBook', bookId)
}
</script>

<style scoped>
.books-covers-container {
    width: 100%;
    margin-bottom: 0;
    position: relative;
    -webkit-overflow-scrolling: touch;
    padding: 0 10px;
    box-sizing: border-box;
}

.books-covers-wrapper {
    display: flex;
    gap: 8px;
    transition: transform 0.3s ease-out;
    will-change: transform;
    touch-action: pan-y pan-x;
    padding: 8px 0;
    width: max-content;
    min-width: 100%;
    flex-wrap: nowrap;
}

.books-covers-wrapper.no-transition {
    transition: none;
}

.book-cover-item {
    flex-shrink: 0;
    width: 70px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    z-index: 1;
}

.book-cover-item.active {
    z-index: 10;
}

.book-cover {
    position: relative;
    width: 70px;
    height: 98px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    /* 古籍风格背景：渐变 + 纹理 + 高光 + 阴影 */
    background: 
        /* 右下角阴影 */
        radial-gradient(circle at 85% 80%, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.05) 30%, transparent 60%),
        /* 左上角高光 */
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 30%, transparent 60%),
        /* 纸张纹理（使用重复线性渐变模拟） */
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(0, 0, 0, 0.03) 4px, rgba(0, 0, 0, 0.03) 4.5px),
        repeating-linear-gradient(90deg, transparent, transparent 4px, rgba(0, 0, 0, 0.03) 4px, rgba(0, 0, 0, 0.03) 4.5px),
        /* 基础渐变背景 */
        linear-gradient(135deg, #e8c89a 0%, #d4a574 30%, #b8935f 60%, #8b6f47 80%, #6b5233 100%);
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.book-cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
    z-index: 1;
}

.book-cover::after {
    content: '';
    position: absolute;
    top: 20%;
    left: 3px;
    bottom: 20%;
    width: 1px;
    background: rgba(139, 111, 71, 0.3);
    pointer-events: none;
    z-index: 1;
}

.book-cover-item.active .book-cover {
    transform: scale(1.08);
    z-index: 10;
    box-shadow: none;
}

.book-cover-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px 4px;
    text-align: center;
}

.book-cover-title {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1.4;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 6px rgba(0, 0, 0, 0.2);
    color: #fff;
    font-family: 'STKaiti', 'KaiTi', '楷体', serif;
    white-space: nowrap;
    overflow: visible;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    word-break: keep-all;
    word-wrap: normal;
    flex-shrink: 0;
}
</style>
